<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>Blue Moon - Responsive Admin Dashboard</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
	content="Blue Moon - Responsive Admin Dashboard" />
<meta name="keywords"
	content="Notifications, Admin, Dashboard, Bootstrap3, Sass, transform, CSS3, HTML5, Web design, UI Design, Responsive Dashboard, Responsive Admin, Admin Theme, Best Admin UI, Bootstrap Theme, Wrapbootstrap, Bootstrap, bootstrap.gallery" />
<meta name="author" content="Bootstrap Gallery" />
<link rel="shortcut icon" href="img/favicon.ico">

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/wysi/bootstrap-wysihtml5.css" rel="stylesheet">

<link href="css/new.css" rel="stylesheet">



<link href="css/jquery.treetable.theme.default.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.treetable.css" rel="stylesheet" type="text/css" />
<!-- Important. For Theming change primary-color variable in main.css  -->

<!-- Color Picker -->
<link rel="stylesheet" href="css/color-picker/jquery.minicolors.css">

<link href="fonts/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/new2.css">
<!--CSACASDAAAAAAAAAAA-->
<script src="layer/jquery.min.js"></script>
<script src="layer/layer.js"></script>
<link href="layer/bootstrap.css">

<!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>

<body>

	<!-- 嵌入头部 -->
	<div th:include="common/header :: header"></div>

	<!-- Main Container start -->
	<div class="dashboard-container">

		<div class="container">
			<!-- 嵌入顶部导航栏 --> 
			<div th:replace="common/topnav :: topnav"></div>

			<!-- 地址 -->
			<!-- 嵌入时间显示片段 -->
        	<div th:replace="common/time :: time"></div>

			<!-- 主体部分 -->
			<div class="dashboard-wrapper">
				<!-- Row Start -->
				<div class="row">
					<div class="col-lg-12 col-md-12">
						<div class="widget">
							<div class="widget-header">
								<div class="title">
									房源生成<a id="dynamic-tables"></a>
								</div>
							</div>
							<div class="widget-header">
								<div><span style="float: left;">项目：</span>
									<select style="margin-top:5px;width:200px; float: left;" id="DateOfBirthMonth" class="form-control input-sm" name="ProId">
										<option value="">请选择</option>
										<option th:each="projects : ${projectList}" th:value="${projects.projectId}" th:text="${projects.projectName}">加载中...</option>							
									</select>
								</div>
								<div style="float: right">
									<span style="font-weight: bold">
										<a id="parentIframe">新增区域</a>
										<a id="aa">新增楼栋</a> 
										<a id="addroom">生成房间</a>
									</span>
								</div>
							</div>
							<div class="widget-body">
								<div id="dt_example" class="example_alt_pagination">
									<table id="example-advanced" width="100%"
										class="table table-condensed table-striped table-hover table-bordered pull-left">
										<thead>
											<tr data-tt-id='1'>
												<td><span><strong>项目/分区/楼栋</strong></span></td>
												<td><strong>房间套数</strong></td>
												<td><strong>建筑面积合计</strong></td>
												<td><strong>套内面积合计</strong></td>
											</tr>
										</thead>
										<tbody id="banlist">
											<tr><td align="center" colspan="4" style="color: red"><h4>选择项目查看信息</h4></td></tr>
										</tbody>
										
									</table>

									<div class="clearfix"></div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>
			<footer>
				<p>© BlueMoon </p>
			</footer>

		</div>
	</div>
	<!-- Main Container end -->

	<script src="js/wysi/wysihtml5-0.3.0.min.js"></script>
	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/wysi/bootstrap3-wysihtml5.js"></script>
	<script src="js/jquery.scrollUp.js"></script>

	<script src="js/jquery.treetable.js"></script>

	<!-- Color Picker -->
	<script src="js/color-picker/jquery.minicolors.js"></script>

	<!-- Custom JS -->
	<script src="js/menu.js"></script>
	
	<script type="text/javascript">
		$("#example-advanced").treetable({
			expandable : true
		});	 
	</script>
	
	<script type="text/javascript">
		//ScrollUp
		$(function() {
			$.scrollUp({
				scrollName : 'scrollUp', // Element ID
				topDistance : '300', // Distance from top before showing element (px)
				topSpeed : 300, // Speed back to top (ms)
				animation : 'fade', // Fade, slide, none
				animationInSpeed : 400, // Animation in speed (ms)
				animationOutSpeed : 400, // Animation out speed (ms)
				scrollText : 'Top', // Text for element
				activeOverlay : false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
			});
		});

		//Tooltip
		$('a').tooltip('hide');

		//Popover
		$('.popover-pop').popover('hide');

		//Dropdown
		$('.dropdown-toggle').dropdown();

		//wysihtml5
		$('.textarea').wysihtml5();

		//Color Pickers
		$(document).ready(function() {
			$('.demo').each(function() {
				$(this).minicolors(
				{control : $(this).attr('data-control') || 'hue',
					defaultValue : $(this).attr('data-defaultValue')|| '',
					inline : $(this).attr('data-inline') === 'true',
					letterCase : $(this).attr('data-letterCase')|| 'lowercase',
					opacity : $(this).attr('data-opacity'),
					position : $(this).attr('data-position')|| 'bottom left',
					change : function(hex,opacity) {
						if (!hex)
							return;
						if (opacity)
							hex += ', '
									+ opacity;
						try {
							console
									.log(hex);
						} catch (e) {
						}
					},
					theme : 'bootstrap'
				});

			});

		});
		
		
	</script>

	<script type="text/javascript">
		function loadjscssfile(filename, filetype) {
	        if (filetype == "js") { //判定文件类型
	            var fileref = document.createElement('script')//创建标签
	            fileref.setAttribute("type", "text/javascript")//定义属性type的值为text/javascript
	            fileref.setAttribute("src", filename)//文件的地址
	        }
	        else if (filetype == "css") { //判定文件类型
	            var fileref = document.createElement("link")
	            fileref.setAttribute("rel", "stylesheet")
	            fileref.setAttribute("type", "text/css")
	            fileref.setAttribute("href", filename)
	        }
	        if (typeof fileref != "undefined")
	            document.getElementsByTagName("head")[0].appendChild(fileref)
	    }
		
		var ProId ;
		var banId ;
	 	$("select#DateOfBirthMonth").change(function(){
	 		ProId= $(this).val();
	 		//alert(ProId);
	 		$.ajax({
	 			type : "POST",
	 			url : "/getBuildInfoByPoid",
	  			data : {ProId:ProId},
	 			contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
	 			dataType : "json",
	 			success : function(data) {
	 				//debugger;
	 				$("#banlist").html("");
	 				if(data.projectlist.length == 0){
	 					$("#banlist").prepend(
	 						"<tr><td align='center' colspan='4' style='color: red'><h4>没有该项目信息</h4></td></tr>");
	 		 			return;
	 		 		}
	 				//第一层循环主项目集合
	 				for (var i = 0; i < data.projectlist.length; i++) { 					
	 					debugger;
	 					var a =((i+1)+1);
	 					//第二层循环子项目集合
	 					for (var j = 0; j < data.projectlist[i].detaillist.length; j++) { 
	 						$("#banlist").append(
	 		 						"<tr class='gradeA success odd'  data-tt-id='"+a+"'>"
	 			 						+"<td><span>"+data.projectlist[i].projectName+"  ~  "+data.projectlist[i].detaillist[j].detAbbreviation+"</span></td>"
	 			 						+"<td></td>"
	 			 						+"<td></td>"
	 			 						+"<td></td>"
	 		 						+"</tr>"
	 		 					);
	 						//第三层循环区域集合
	 						for (var m = 0; m < data.projectlist[i].detaillist[j].regionlist.length; m++) { 
		 						$("#banlist").append(
		 		 						"<tr class='gradeX warning' data-tt-id='"+a+"-1' data-tt-parent-id='"+a+"'>"
		 		 							+"<td><span>"+data.projectlist[i].detaillist[j].regionlist[m].regName+"</span></td>"
		 			 						+"<td></td>"
		 			 						+"<td></td>"
		 			 						+"<td></td>"
		 								+"</tr>"
		 		 				);
		 		 				//第四层循环楼栋集合
		 		 				for (var k = 0; k < data.projectlist[i].detaillist[j].regionlist[m].buildList.length; k++) { 
		 		 					debugger;
			 						$("#banlist").append(
		 		 						"<tr data-tt-id='"+a+"-1' data-tt-parent-id='"+a+"'>"
		 		 							+"<td><input type='checkbox' class='selectOne' value='"+data.projectlist[i].detaillist[j].regionlist[m].buildList[k].banId+"' /><span>"+data.projectlist[i].detaillist[j].regionlist[m].buildList[k].banName+"</span></td>"
		 		 							//+"<td><input name='banid' type='text' value='"+data.projectlist[i].detaillist[j].regionlist[m].buildList[k].banId+"'/></td>"
		 			 						+"<td>"+data.projectlist[i].detaillist[j].regionlist[m].buildList[k].banRoomNumber+"</td>"
		 			 						+"<td>"+data.projectlist[i].detaillist[j].regionlist[m].buildList[k].banArchitectureAcreage+"</td>"
		 			 						+"<td>"+data.projectlist[i].detaillist[j].regionlist[m].buildList[k].banSetAcreage+"</td>"
		 								+"</tr>"
			 		 				);
		 						}//第四层
		 					}//第三层
	 					}//第二层				
	 				}//第一层	
	 					 				
	 				/* loadjscssfile('css/jquery.treetable.theme.default.css', "css"); //加载你的css文件
	 				loadjscssfile('css/jquery.treetable.css', "css"); //加载你的js文件
	 				loadjscssfile('js/jquery.treetable.js', "js"); //加载你的js文件 */
                     
	 				$('#addroom').on('click', function() {
	 					debugger;
	 					if($('.selectOne:checked').length == 1 ){
	 						banId = $('.selectOne:checked').val();
	 						var banName = $('.selectOne:checked').next().text();
	 						//alert(banName);
	 						//alert("进入生成房间页面！")
 							layer.open({
 								type : 2,
 								skin : 'layui-layer-lan',
 								title : '生成房间向导',
 								fix : false,
 								shadeClose : true,
 								maxmin : true,
 								area : [ '1000px', '550px' ],
 								content : '/madeFloorAndUnitPath?banId='+banId+'&banName='+banName,
 							});
	 			    	}else{
	 			    		alert("请选择一个单位生成房间！！！");
	 			    	}
	 				});//点击事件
	 			}//回调函数   
	 		});//ajax
		 });//选择事件
		 
		//新增区域按钮事件 
	 	$('#parentIframe').on('click', function() {
	 		if(ProId==null){
				alert("请先选择项目！！！")
			}else{
				layer.open({
					type : 2,
					skin : 'layui-layer-lan',
					title : '新增区域',
					fix : false,
					shadeClose : true,
					maxmin : true,
					area : [ '1000px', '260px' ],
					content : '/addBuildRePath?ProId='+ProId,
				});
			}
		});
		//新增楼栋按钮事件
		$('#aa').on('click', function() {
			if(ProId==null){
				alert("请先选择项目！！！")
			}else{
				layer.open({
					type : 2,
					skin : 'layui-layer-lan',
					title : '新增楼栋',
					fix : false,
					shadeClose : true,
					maxmin : true,
					area : [ '1000px', '400px' ],
					content : '/addBuildPath?ProId='+ProId,
				});			
			}			
		});
		//生成房间按钮事件
		$('#addroom').on('click', function() {
			debugger;
			if(ProId==null){
				alert("请先选择项目！！！");
				return;
			}
		});
	</script>

</body>
</html>